<template>
	<div class="cate-tab1 swiper">
		<!-- 计算属性的返回结果[重组的数组]，丢给循环操作 -->
		<ol class="swiper-wrapper">
			<li v-for="( list , index ) in pages" :key="index" class="swiper-slide">
				<router-link to="/" v-for="item in list" :key="item.id">
					<img :src="item.imgURL" />
					<aside>
						<h3>{{item.title}}</h3>
						<label>{{item.msg}}</label>
						<p> ￥{{item.price}}起<em>{{item.oldprice}}</em> </p>
					</aside>
				</router-link>
			</li>
		</ol>
		<!-- a标签，自定义选择器 -->
		<router-link to="/">
			<button class="btn">加载更多<i class="iconfont">&#xe622;</i></button>
		</router-link>
	</div>
</template>

<script>
	//1.引入vue周期函数
	import {mapState} from 'vuex'
	import {
		onMounted
	} from 'vue';
	//2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	//3.说明swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube, Pagination]);
	
	export default{
		name:'CategoryTab1',
		data(){
			return{
				tab1List : []

			}
		},
		props:['propcategory1'],
		created() {
			this.tab1List=this.propcategory1
			let that=this
			this.axios.get('/api/dataHome.json').then( (res)=>{
				let data=res.data.Homemsg[0]
				// console.log(res.data.Homemsg);
				for(let i in res.data.Homemsg){
					// console.log(res.data.Homemsg[i].city);
					if(res.data.Homemsg[i].city==this.cityName){
						data=res.data.Homemsg[i]
					}
				}
				that.tab1List=data.CategoryVueList.tab1list
				
			} ).catch( (error)=>{
				
				console.log(error);
			
			} );
		},
		computed:{
			// 程序将其当成是属性而不是函数，是个变量【循环/判断】
			pages(){
				let arr = [];	//空数组，目的是：重组一个二维数组
				let num = 4; 	//每页条数
				// 将原数组遍历
				this.tab1List.forEach( (item , index)=>{
					// i：每页的页码
					let i = Math.floor( index / num );
					if( !arr[i] )	arr[i] = [];
					arr[i].push( item );
				} );
				return arr;
			},
			...mapState(['cityName'])
		},
		updated(){
			new Swiper('.cate-tab1', {
				loop:false,
				//修改swiper自己或者子元素时自动初始化swiper
				observer:true,
				//修改swiper容器，自动初始化swiper
				observerParents:true
			})
		}
	}
</script>

<style scoped>
	a{
		color:#000000;
		text-decoration: none;
	}
	.cate-tab1{
		height: 9.2rem;
	}
	.cate-tab1 ol{
		width: 100%;
		height: 90%;
	}
	.cate-tab1 ol li{
		width: 100%;
		height: 100%;
	}
	.cate-tab1 img{
		width: 90%;
		height: 2.5rem;
		border-radius: 0.2rem;
	}
	.cate-tab1 ol li a{
		margin-top: 0.25rem;
		float: left;
		width: 48%;
	}
	.cate-tab1 ol li a:nth-child(even)
	{
		float: right;
		width: 48%;
	}
	.cate-tab1 aside{
		height: 36%;
	}
	.cate-tab1 aside h3{
		margin-top: 0.1rem;
		font-size: 0.35rem;
		font-weight: bold;
		
	}
	.cate-tab1 aside label{
		font-size: 0.26rem;
		color: gray;
		margin-top: 0.1rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;/*与高度有关*/
		/* 超出盒子外的文本用省略号代替 */
		-webkit-box-orient: vertical;
	}
	.cate-tab1 aside p{
		margin-top: 0.1rem;
		font-size: 0.3rem;
		font-weight: bold;
		color: #ff9847;
	}
	.cate-tab1 aside p em{
		color: lightgray;
		font-size: 0.2rem;
		text-decoration: line-through;
		padding-left: 0.2rem;
	}
	.btn{
		font-weight: bold;
		width: 100%;
		height: 10%;
		border-radius: 0.5rem;
		border: none;
		border: 1px solid lightgrey;
		background-color: white;
	}
	.btn i{
		font-size: 0.2rem;
	}
</style>
